<template>
  <div class="d-flex flex-column" style="cursor:pointer;">
    <span class="span-disease-name">{{dataset.disease}}</span>

    <span class="span-diagnosis-info my-1">来自{{dataset.source}} - {{dataset.confidence>=0?((100*dataset.confidence).toFixed(2)+"%"):"暂无置信度"}}</span>

    <div class="progress" style="height:10px;">
        <div class="progress-bar" :style="{width:dataset.confidence>=0?(100*dataset.confidence+'%'):0,'background-color':progressBarColor}" role="progressbar"></div>
    </div>
    
  </div>
</template>

<script>
import {calculateProgressColor} from "../../modules/Utilities";

export default {
    computed:{
        progressBarColor(){
            return calculateProgressColor(this.dataset.confidence);
        }
    },
    props:{
        // Currently must contain:
        // source:String, disease:String, confidence:Number(0 to 1),
        dataset:{
            type:Object,
            required:true
        }
    },

}
</script>

<style>
.span-disease-name{
  font-weight: bold;
  font-size: x-large;
  margin:0 20px 0 0;
  color: white;
}

.span-diagnosis-info{
    font-size: small;
}
</style>